<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/plugins/treeview/bootstarp-tree.css">
<style>
.row{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px
}
.confirmBtn{
	position:absolute;
	right: 5px;
	color: green;
}
td{
	font-size:10px;
	text-align: center;
}
th{
	font-size:13px;
	text-align: center;
}
.btn{
	margin-left: 10px;
	margin-right: 10px
}
.tdbox{
	position: relative;
}
.btnbox{
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px 10px 10px 0;
}
</style>
<div class="row">
<div class="col-sm-8 roleList">
	<div class="ibox float-e-margins animated bounceInLeft">
		<div class="ibox-title col-sm-12" style="border-bottom: none; background: #fff;">
			<div class="col-sm-10" style="height:100%;vertical-align: middle;">员工部门管理</div>
			<div class="col-sm-2" style="position: fixed;right: 10px;top:10px"><button title="增加角色" id="addRole" class="btn btn-success btn-sm dim" type="button"><i class="fa fa-plus"></i></button></div>
		</div>
		<div class="ibox-content" style="border-top: none;">
			<table id="roleListTable" class="table table-condensed table-hover table-bordered">
				<tr>
					<th>ID</th>
					<th>部门</th>
					<th>当前部门人数</th>
					<th>操作</th>
				</tr>
				<c:forEach  items="${role}" var="role">
					<tr>
						<td style="width: 10%">${role.id}</td>
						<td id="role${role.id}" style="width: 30%">${role.role}</td>
						<td style="width: 20%">${role.count}</td>
						<td style="width: 50%"><a data="${role.id}" onclick="edit(this)" class="btn btn-sm btn-success btn-rounded">编辑</a><a data="${role.id}" onclick="delRole(this)" class="btn btn-sm btn-danger btn-rounded">删除</a><a id="${role.id}" onclick="showNode(this)" class="btn btn-sm btn-warning btn-rounded">权限该角色</a></td>
					</tr>
				</c:forEach>
			</table>
		</div>
	</div>
</div>

<div class="col-sm-4 nodeList">
		<div class="ibox float-e-margins animated bounceInLeft">
		<div class="ibox-title col-sm-12" style="border-bottom: none; background: #fff;">
			<div class="col-sm-12" style="height:100%;vertical-align: middle;">权限节点名:  <b id="info">未选择</b></div>
		</div>
		<div class="ibox-content" style="border-top: none;">
		
		<div class="tree well">
		    <ul>
		    	<c:forEach items="${nodes}" var="nodes">
				<c:choose>
					<c:when test="${nodes.status==1}">
					      <li>
					          <span><i class="${nodes.icon}"></i>${nodes.node}</span><a data="${nodes.id}" data-role="" onclick="addAuth(this)" style="display: none" class="databtn"></a>
					      </li>
					</c:when>
					<c:otherwise>
						<li><span><i class="${nodes.icon}"></i>${nodes.node}</span><a data="${nodes.id}" data-role="" onclick="addAuth(this)" style="display: none" class="databtn"></a>
							<ul>
							<c:choose>
								<c:when test="${empty nodes.nodes}"></c:when>
								<c:otherwise>
								<c:forEach items="${nodes.nodes}" var="child">
									<li><span><i class="${child.icon}"></i> ${child.node}</span><a data="${child.id}" data-role="" onclick="addAuth(this)" style="display: none" class="databtn"></a></li>
								</c:forEach>
								</c:otherwise>
							</c:choose>
							</ul>
						</li>
					</c:otherwise>
				</c:choose>
			 </c:forEach>
		    </ul>
		</div>
		</div>
	</div>
</div>
	
</div>
<script type="text/javascript">
		function showNode(obj){
			var roleId = $(obj).attr('id');	
			var btnDom = $('.databtn');
			var nodeName = $(obj).parent().parent().find('td:nth-child(2)').text();
			$('#info').text(nodeName);
			$.ajax({
				url:'<%=basePath%>Node/getAuthNodes',
				type:'POST',
				dataType:'JSON',
				data:{'roleId':roleId},
				success:function(data){
					if (data.code=='401'){
						$(btnDom).each(function(index,dom){
							$(dom).html('授权');
							$(dom).removeClass();
							$(dom).attr('data-role',roleId);
							$(dom).attr('data-status',1);
							$(dom).addClass('databtn btn btn-sm btn-success');
							$(dom).fadeIn(400);
						}); 
					}else if (data.code=='200'){
						$(btnDom).each(function(index,dom){
							var nodeId = $(dom).attr('data');
							if($.inArray(parseInt(nodeId), data.data)>=0){
								$(dom).removeClass();
								$(dom).html('取消授权');
								$(dom).attr('data-role',roleId);
								$(dom).attr('data-status',2);
								$(dom).addClass('databtn btn btn-sm btn-danger');
								$(dom).fadeIn(400);
								return true;
							}else{
								$(dom).removeClass();
								$(dom).html('授权');
								$(dom).attr('data-role',roleId);
								$(dom).attr('data-status',1);
								$(dom).addClass('databtn btn btn-sm btn-success');
								$(dom).fadeIn(400);
								return true;
							}
						}); 
					}else{
						toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
					}
				},
				error:function(){
					toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
				}
			});
		}
	/* 授权以及取消授权 */
	function addAuth(obj){
		var roleId = $(obj).attr('data-role');
		var nodeId = $(obj).attr('data');
		var status =  $(obj).attr('data-status');
		var liArr = $(obj).parent().find('ul').children('li');
		var nodeName = $('#info').text();
		var title = '';
		var content = '';
		if (status==1){
			title = '确认授权';
			content = '确认对:"'+nodeName+'"的授权!'
		}else{
			title = '取消授权';
			content = '取消对："'+nodeName+'" 的授权!'
		}
		new $.flavr({
			content : '确认授权该部门？',
            dialog : 'confirm', 
            onConfirm : function(){ 
            	$.ajax({
					url:'<%=basePath%>Node/addAuth',
					type:'POST',
					dataType:'JSON',
					data:{'roleId':roleId,'nodeId':nodeId,'status':status},
					success:function(data){
						if(data.code=='200'){
							if(status=='1'){
								toastr.success('授权成功,该角色下次登录时生效','授权成功');
								$(obj).removeClass();
								$(obj).html('取消授权');
								$(obj).attr('data-role',roleId);
								$(obj).attr('data-status',2);
								$(obj).addClass('databtn btn btn-sm btn-danger');
								$(obj).fadeIn(400);
							}else{
								toastr.warning('撤销授权成功','撤销成功');
								if(liArr.length>0){
									$(liArr).each(function(index,element){
										$(element).children('a').removeClass();
										$(element).children('a').html('授权');
										$(element).children('a').attr('data-role',roleId);
										$(element).children('a').attr('data-status',1);
										$(element).children('a').addClass('databtn btn btn-sm btn-success');
										$(element).children('a').fadeIn(400);
									});
								}
								$(obj).removeClass();
								$(obj).html('授权');
								$(obj).attr('data-role',roleId);
								$(obj).attr('data-status',1);
								$(obj).addClass('databtn btn btn-sm btn-success');
								$(obj).fadeIn(400);
							}
						}else{
							toastr.warning(data.message,'错误');
						}
					},
					error:function(){
						toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
					}
				});
            	
            }, 
            onCancel : function(){
            	toastr.warning('取消操作','取消操作');
           	 } 
         });
	}

	/* 编辑按钮 */
	function edit(obj){
		 var id = $(obj).attr('data');
		 var text = $('#role'+id).text();
		 $('#role'+id).html("<div class='tdbox'><div class='btnbox'><a id='"+id+"' style='color:green;margin-right:10px' onclick='editSave(this)'><i class='sunmit fa fa-check'></i></a><a style='color:red' data='"+text+"' onclick='editClose(this)'><i class='fa fa-close'></i></a></div><input class='form-control' data='"+id+" type='text' value='"+text+"'></input></div>");
	}
	/* 编辑确认 */
	function editSave(obj){
		var input = $(obj).parent().parent().children('input')
		var id = $(obj).attr('id');
		var roleName = $(input).val();
		if (roleName==null||roleName==''){
			toastr.error('组别名不能为空','错误');
			return null;
		}
		$.ajax({
			url:'<%=basePath%>Role/editRole',
			data:{'roleName':roleName,'id':id},
			type:'POST',
			dataType:'json',
			success:function(data){
				if (data.code=='200'){
					toastr.success(data.message,'成功');
					var td = $(obj).parent().parent().parent();
					$(td).text(roleName);
				}else{
					toastr.error(data.message,'失败');
				}
			},
			error:function(){
				toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
			}
		});
	}
	/* 编辑取消 */
	function editClose(obj){
		var td = $(obj).parent().parent().parent();
		var text =  $(obj).attr('data');
		$(td).text(text);
	}
	/* 新增角色按钮 */
	$('#addRole').click(function() {
		$('#roleListTable').append('<tr><td></td><td><input class="form-control"></input></td><td></td><td><a onclick="save(this)" class="btn btn-sm btn-success btn-rounded">保存</a><a onclick="cancel(this)" class="btn btn-sm btn-warning btn-rounded">取消</a></td></tr>');
	});
	/* 删除角色 */
	function delRole(obj){
		var tr = $(obj).parent().parent();
		var id = $(obj).attr('data');
		new $.flavr({ 
			content : '删除该组别后对应用户将失去该组别所有权限!',
            dialog : 'confirm', 
            onConfirm : function(){ 
            	$.ajax({
    				url:'<%=basePath%>Role/delRole',
    				data:{'id':id},
    				type:'POST',
    				dataType:'json',
    				success:function(data){
    					if (data.code=='200'){
    						toastr.success(data.message,'成功');
    						tr.addClass('animated rotateOutUpRight');
    						setTimeout(function(){
    							tr.remove();
    						}, 400);
    					}else{
    						toastr.error(data.message,'操作失败');
    					}
    				},
    				error:function(){
    					toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
    				}
    			});
            }, 
            onCancel : function(){
            	toastr.warning('已取消操作','已取消');
            } 
        });
	}
	/* 取消按钮 */
	function cancel(obj){
		var tr = $(obj).parent().parent();
		$(tr).fadeOut();
	}
	/* 保存按钮	 */
	function save(obj){
		var tr = $(obj).parent().parent();
		var roleName = $(tr).find('td:nth-child(2) input').val();
		if (roleName==null||roleName==''){
			toastr.error('填写组别名称','错误');
			return null;
		}
		$.ajax({
			url:'<%=basePath%>Role/addRole',
			data:{'roleName':roleName},
			type:'POST',
			dataType:'json',
			success:function(data){
				if (data.code=='200'){
					toastr.success(data.message,'成功');
					tr.remove();
					$('#roleListTable').append('<tr><td style="width: 10%">'+data.data.id+'</td><td id="role'+data.data.id+'" style="width: 30%">'+data.data.role+'</td><td style="width: 20%">0</td><td style="width: 50%"><a data="'+data.data.id+'" onclick="edit(this)" class="btn btn-sm btn-success btn-rounded">编辑</a><a data="'+data.data.id+'" onclick="delRole(this)" class="btn btn-sm btn-danger btn-rounded">删除</a><a id="'+data.data.id+'" onclick="showNode(this)" class="btn btn-sm btn-warning btn-rounded">权限该角色</a></td></tr>')
					$('body').delegate();
				}else{
					toastr.error(data.message,'失败');
				}
			},
			error:function(){
				toastr.error('服务器发烧了>_<,请稍后再试','网络异常');
			}
		});
	}
</script>
<!-- Bootstrap table -->
<script src="<%=basePath %>js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="<%=basePath%>js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="<%=basePath%>js/plugins/treeview/bootstrap-tree.js"></script>


